<template>
  <div class="drag-step" :class="{ hide: isHide }" :style="dragStyle" @contextmenu="showMenu">
    <template v-if="imglist.length">
      <div v-for="item in imglist">
        <img
          v-if="item?.tpObj?.tpurl || item?.fpurl"
          :src="imgUrl + (item?.tpObj?.tpurl || item?.fpurl)"
          v-show="item.id == props.pyDtkqtId"
          :style="{
            transform: `translate(-50%, -50%) rotate(${
              (item?.tpObj?.ymlx === 1 && item?.tpObj?.zzfx === 1) ||
              (item?.tpObj?.ymlx === 2 && item?.tpObj?.zzfx === 2)
                ? -90
                : (item?.tpObj?.ymlx === 1 && item?.tpObj?.zzfx === 2) ||
                  (item?.tpObj?.ymlx === 2 && item?.tpObj?.zzfx === 1)
                ? 90
                : 0 || 0
            }deg) `,
            transformOrigin: 'center',
          }"
          class="absolute top-1/2 left-1/2"
        />
      </div>
    </template>

    <template v-if="tagsList.length">
      <div
        v-for="step in tagsList"
        :key="step.pyDfdId"
        v-show="step.pyDtkqtId == props.pyDtkqtId"
        class="drag-item step"
        :style="{
          left: countXsexe(step.x, step.pyDtkqtId) + 'px',
          top: step.y + 'px',
          transform: `scale(${1 / scale})`,
          transition: '0.3s',
          transformOrigin: '0 0',
          fontSize: isHide ? `${(parseInt(props.dragStyle?.width || 3000) / 1000) * 25}px` : '45px',
        }"
        @click="clickStepItem(step.value)"
      >
        <div>{{ step.value }} </div>
        <div
          class="whitespace-nowrap"
          :style="{
            fontSize: isHide
              ? `${(parseInt(props.dragStyle?.width || 3000) / 1000) * 8.5}px`
              : '15px',
          }"
        >
          <div class="remarks" v-show="step.tmbh">
            {{ step.tmbh }}
            <a-tag color="#2db7f5" v-if="step.pyMs">
              {{ step.pyMs == 1 ? '单评' : step.pyMs == 2 ? '双评' : '' }}
            </a-tag>
          </div>
          <div class="remarks" v-show="step.pyDfdId != 'totleScole'">
            得分点{{ step.index }} &nbsp;
          </div>
          <div class="remarks" v-show="step.account"> ({{ step.jsxm }}){{ step.account }}</div>
          <div class="remarks" v-if="step.lfYyTyp" :title="step.lfBz">
            零分原因：
            {{ lfYcList.filter(item => item.value == step.lfYyTyp)[0].label || '其他' }}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
import { getDictionaryList } from '/@/views/teacher/home/index'
import { useGlobSetting } from '/@/hooks/setting'
const { imgUrl } = useGlobSetting()

const props = defineProps({
  isHide: {
    type: Boolean,
    default: false,
  },
  // 拖拽的元素列表
  tagsList: {
    type: Array,
    default: () => [],
  },
  // 应该与 isHide=true 时使用
  dragStyle: {
    type: Object,
    default: () => ({}),
  },
  rotate: {
    type: Number,
    default: 0,
  },
  scale: {
    type: Number,
    default: 1,
  },
  pyDtkqtId: {
    type: [Number, String],
    default: 0,
  },
  imglist: {
    type: Array,
    default: () => [],
  },
} as any)

const contextMenuData = reactive({
  menuName: 'menu',
  //菜单显示的位置
  axis: {
    x: null,
    y: null,
  },
  //菜单选项
  menulists: [
    {
      fnHandler: 'deleteMenu',
      icoName: 'fa fa-minus-square-o  fa-fw',
      btnName: '删除',
    },
  ],
})

const clickStepItem = (value: any) => {
  // console.log(value);
}

function countXsexe(x: number, y: number) {
  let obj = props.imglist.find(item => item.id == y)
  if (props.isHide && obj?.tpObj?.ymlx == 1) {
    x += parseInt(props.dragStyle.width) / 10 || 0
  }

  return x
}

/**
 * 显示菜单
 */
const showMenu = event => {
  event.preventDefault()
  var x = event.clientX
  var y = event.clientY
  contextMenuData.axis = {
    x,
    y,
  }
}

/**
 * 删除菜单
 */
const deleteMenu = () => {}

const lfYcList = ref<any[]>([])

onMounted(async () => {
  lfYcList.value = (await getDictionaryList('lfCode')) || []
})
</script>

<style scoped>
.drag-step.hide {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-size: contain;
}

.drag-item {
  position: absolute;
  user-select: none;
  line-height: 1;
}

.drag-item.step {
  font-weight: 600;
  color: #f00;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  opacity: 0.7;
}

.remarks {
  color: blue;
  line-height: 1;
  white-space: nowrap;
  margin-top: 5px;
}
</style>
